<!-- 151/266/267 组件-->
<template>
	<div>
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="tabBox"
			ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
			<a-form-item :label="$t('T9_shopId')" name="shopId">
				<a-select
					v-model:value="queryForm.shopId"
					:placeholder="$t('common_pleaseSelect')"
					class="select-width"
				>
					<a-select-option
						v-for="item in options.shopIdList"
						:key="item.value"
						:value="item.value"
						>{{ item.label }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item :label="$t('T9_boxId')" name="boxId">
				<a-input
					v-model:value="queryForm.boxId"
					allow-clear
					class="select-width"
					:placeholder="$t('common_pleaseEnter1')"
				/>
			</a-form-item>
		</t-query-form>
		<a-descriptions
			bordered
			:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
		>
			<a-descriptions-item
				v-for="(val, key) in info"
				:key="key"
				:label="$t(`T9_${key}`)"
			>
				{{ val }}
			</a-descriptions-item>
		</a-descriptions>
		<a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_panelList')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button>{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
		<t-table :loading="searchBtnLoading" :data="list.tableData">
			<t-column field="panelId" :title="$t('T9_panelId')" />
			<t-column field="productId" :title="$t('T9_productId')" />
			<t-column field="productVer" :title="$t('T9_productVer')" />
			<t-column field="slot" :title="$t('T9_slot')" />
			<t-column field="productState" :title="$t('T9_productState')" />
			<t-column field="processState" :title="$t('T9_processState')" />
			<t-column field="productReasonCode" :title="$t('T9_productReasonCode')" />
			<t-column field="dueDate" :title="$t('T9_dueDate')" />
			<t-column field="productType" :title="$t('T9_productType')" />
			<t-column field="owner" :title="$t('T9_owner')" />
			<t-column field="ownerType" :title="$t('T9_ownerType')" />
			<t-column field="glassGrade" :title="$t('T9_glassGrade')" />
			<t-column field="boxUldFlag" :title="$t('T9_boxUldFlag')" />
			<t-column field="groupId" :title="$t('T9_groupId')" />
			<t-column field="shipGroupId" :title="$t('T9_shipGroupId')" />
			<t-column field="glassHoldState" :title="$t('T9_glassHoldState')" />
			<t-column field="stayHour" :title="$t('T9_stayHour')" />
			<t-column field="multiOwnerId" :title="$t('T9_multiOwnerId')" />
			<t-column field="shortcutFlag" :title="$t('T9_shortcutFlag')" />
		</t-table>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'

  export default defineComponent({
    name: 'Box',
    components: {},
    mixins: [initOptionsMixin],
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        searchBtnLoading: false,
        queryForm: {
          shopId: 'ARRAY',
          boxId: this.id
        },
        options: {
          shopIdList
        },
        info: {
          boxId: '',
          grade: '',
          panelCapacity: '',
          panelQty: '',
          packingUser: '',
          packingTime: '',
          destination: '',
          palletId: '',
          route: '',
          operation: '',
          processState: '',
          owner: '',
          state: '',
          boxHoldState: '',
          settingCode: '',
          location: ''
        },
        list: {
          tableData: [],
          basicParams: {
            queryId: 'GetProductList',
            version: '81043',
            dtoName: 'BoxDTO',
            menuName: 'viewBoxPalletInformation',
            usage: 'getBoxInformation',
            materialType: 'Product',
            site: ''
          }
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          boxId: [
            {
              required: true,
              message: this.$t('valid_required'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {},
    mounted() {
      if (this.id !== '') {
        this.handleSearch()
      }
    },
    watch: {
      id: {
        handler() {
          this.handleSearch()
        }
      }
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...this.list.basicParams }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res.boxListDTOList || []
                Object.assign(this.info, res.boxListInformationDTO)
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
